<template>
  <div>
    <input type="text" v-model="obj.title" @keydown.enter="add">
    <h1>正在进行 (<span>{{ (arr.length - count) }}</span>) </h1>
    <ul>
      <li v-for="(item, index) in arr" :key="index" v-show="!item.flag">
        <input type="checkbox" v-model="item.flag">
        <span @dblclick="a(index)" v-show="!item.isEdit">{{ item.title }}</span>
        <!-- 编辑框 -->
        <input type="text" v-show="item.isEdit" v-model="item.title" @blur="edit(item.title, index)">
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <h1>已经完成 (<span>{{ count }}</span>) </h1>
    <ul>
      <li v-for="(item, index) in arr" :key="index" v-show="item.flag">
        <input type="checkbox" v-model="item.flag">
        <span>{{ item.title }}</span>
        <!-- 编辑框 -->
        <input type="text" v-show="item.isEdit">
        <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref, reactive, computed } from 'vue'
/* 接口定义标题类型 */
// interface TitleType {
//   inpTitle: string;
// }
/* 接口定义对象类型 */
interface TodoType {
  title: string;
  flag: any;
  isEdit: boolean;
}
export default {
  setup() {
    let obj: TodoType = { title: '', flag: false, isEdit: false }
    let arr: TodoType[] = reactive([])
    let add = () => {
      if (obj.title == '') {
        alert('添加内容不能为空');
        return false;
      }
      let user = {
        title: obj.title,
        flag: obj.flag,
        isEdit: obj.isEdit
      }
      arr.push(user);
      obj.title = ''
    }
    /* 删除 */
    let del = (index: number) => {
      arr.splice(index, 1);
    }
    /* 数量统计 */
    let count = computed(() => {
      // 该函数的返回值就是计算属性的值
      return arr.filter((item) => {
        return item.flag == true
      }).length
    })
    /* 回显 */
    let a = (key: number) => {
      arr[key].isEdit = !arr[key].isEdit;
    }
    /* 编辑 */
    let edit = (val: string, key: number) => {
      console.log(val);
      arr[key].title = val;
      arr[key].isEdit = !arr[key].isEdit;
    }
    return {
      arr,
      add,
      obj,
      del,
      count,
      a,
      edit,
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  width: 300px;
  display: flex;
  justify-content: space-between;
}
</style>